<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:p="http://primefaces.org/ui"
      	  xmlns:ui="http://java.sun.com/jsf/facelets"
      	  xmlns:t="http://myfaces.apache.org/tomahawk">
      	
      	
	<h:body>
    	<ui:composition template="../../templates/general.xhtml">
      		<ui:define name="content">
      		
      			<f:event type="preRenderView" listener="#{gruposGitBean.init}" />
				
				<h1 class="page-header">
					<i class="fa fa-github fa-3"></i> Grupos Github
				</h1>
				
      			<p:growl id="msgs" showDetail="true"/>
      			
      			<p:menuButton id="menuGrupoGit" value="Opções" style="float:right;">
        			<p:menuitem value="Gravar" action="#{gruposGitBean.gravarEditar}" process="@this :form:gruposGitTable" update=":form:msgs :form:gruposGitTable" icon="ui-icon-disk" rendered="#{!gruposGitBean.disableComponent}"/>
        			<p:menuitem value="Editar" action="#{gruposGitBean.editar}" process="@this" update=":form:msgs :form:gruposGitTable :form:menuGrupoGit" icon="ui-icon-arrowrefresh-1-w" rendered="#{gruposGitBean.disableComponent}"/>
        			<p:menuitem value="Novo Grupo" action="#{gruposGitBean.novo}" oncomplete="PF('grupoGitDlg').show();" icon="ui-icon-arrowrefresh-1-w"/>
    			</p:menuButton>
      			
      			<p:dataTable id="gruposGitTable" var="grupo" value="#{gruposGitBean.gruposGit}" style="margin-top:75px;"> 	
      				<p:ajax event="rowToggle" onstart="test();" />
       				
       				<p:column style="width:45px; font-size: 0.9em;">
            			<p:rowToggler />
        			</p:column>
        			
        			<p:column headerText="Grupo" style="font-size: 0.9em;">
            			<h:outputText value="#{grupo.grupo.numero}" />
        			</p:column>
        			
        			<p:column headerText="Team Github" style="font-size: 0.9em;">
            			<h:outputText value="#{gruposGitBean.teamGithub(grupo)}" />
        			</p:column>
        			
        			<p:column headerText="Nº alunos" style="font-size: 0.9em;">
            			<h:outputText value="#{grupo.numAlunos}" />
        			</p:column>
        			
        			<p:column style="width:60px; font-size: 0.9em;">
						<p:commandButton icon="ui-icon-trash" title="Apagar grupo"
							style="font-size: 0.9em;"
							actionListener="#{gruposGitBean.apagar(grupo)}"
							update=":form:gruposGitTable :form:msgs" rendered="#{!gruposGitBean.disableComponent}">
							<p:confirm header="Confirmação"
								message="Tem a certeza que pretende eliminar este grupo?"
								icon="ui-icon-alert" />
						</p:commandButton>
        			</p:column>
        			
        			<p:rowExpansion>
        				<h:panelGroup style="border:none;" id="formGrupo">
       						<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue" style="margin-bottom:30px;">
                			
                				<h:outputText value="Nome:" style="font-size: 0.9em;" />
                				<p:inputText id="nome" value="#{grupo.nome}" disabled="#{gruposGitBean.disableComponent}" style="font-size: 0.9em;" />
                				
                				<h:outputText value="Grupo:" style="font-size: 0.9em;" />
								<p:selectOneMenu id="ddlGrupo"
									value="#{grupo.grupo}"
									disabled="#{gruposGitBean.disableComponent}"
									style="font-size: 0.9em; width:100px;" converter="#{grupoConverter}">
										
									<p:ajax listener="#{gruposGitBean.actualizaNome(grupo)}" update="nome" />

									<f:selectItems value="#{gruposGitBean.listaGrupos}" var="g" itemLabel="#{g.numero}" itemValue="#{g}" />
								</p:selectOneMenu>
                				
                				<h:outputText for="ddlTeam" value="Team Github:" style="font-size: 0.9em;" />
								<p:selectOneMenu id="ddlTeam"
									value="#{grupo.idTeamGit}"
									disabled="#{gruposGitBean.disableComponent}"
									style="font-size: 0.9em; width:100px;">
										
									<f:selectItem itemLabel="Seleccione" itemValue="" />
										
									<f:selectItems value="#{gruposGitBean.teamsGit}" var="t"
											itemLabel="#{t.name}" itemValue="#{t.id}" />
								</p:selectOneMenu>
                			</p:panelGrid>
                			
                			<h4 class="page-header">
								Membros
							</h4>
							
							<h:panelGrid id="addAlunoGrid" columns="3" columnClasses="first,second,noBorder"
								style="margin-bottom:10px;"
								rendered="#{!gruposGitBean.disableComponent}">
								
								<h:outputLabel value="Escolha um aluno: " for="addAluno"
									rendered="#{!gruposGitBean.disableComponent}"
									style="font-size: 0.9em;" />
								<p:autoComplete value="#{gruposGitBean.alunoSeleccionado}"
									id="addAluno" completeMethod="#{gruposGitBean.completeAluno}"
									style="font-size: 0.9em;" var="a" itemLabel="#{a.numero}"
									itemValue="#{a}" converter="#{alunoConverter}"
									forceSelection="true"
									rendered="#{!gruposGitBean.disableComponent}">
									<p:column>
                    					#{a.numero} - #{a.nome}
                					</p:column>
								</p:autoComplete>
								<p:commandButton value="Adicionar" update=":form:msgs dataTableAlunos"
									action="#{gruposGitBean.adicionarAluno(grupo)}"
									style="margin-left: 10px; font-size: 0.9em;"
									process="@this addAlunoGrid" />
							</h:panelGrid>
							
							<h:panelGrid columns="1"  columnClasses="noBorder">
								<p:dataTable id="dataTableAlunos" var="aluno" value="#{grupo.alunos}">

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Número 
            							</f:facet>
										<h:outputText value="#{aluno.numero}" />
									</p:column>

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							User Github 
            							</f:facet>
										<h:outputText value="#{aluno.userGitHub}" />
									</p:column>

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Confirmado? 
            							</f:facet>
										<p:selectBooleanCheckbox value="#{aluno.hasGithub}" disabled="#{gruposGitBean.disableComponent}" />
									</p:column>
									
									<p:column>
										<p:commandButton icon="ui-icon-trash"
											title="Eliminar aluno do grupo" style="font-size: 0.9em;"
											actionListener="#{gruposGitBean.eliminarAluno(grupo,aluno)}"
											update=":form:msgs dataTableAlunos"
											rendered="#{!gruposGitBean.disableComponent}">
											
											<p:confirm header="Confirmação"
												message="Tem a certeza que pretende eliminar este aluno do grupo?"
												icon="ui-icon-alert" />
										</p:commandButton>
									</p:column>
									
								</p:dataTable>	
							</h:panelGrid>
								
                		</h:panelGroup>	
        			</p:rowExpansion>
        			
      			</p:dataTable>

      			<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
					style="font-size: 0.9em;">
					<p:commandButton value="Sim" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
						style="font-size: 0.9em;" />
					<p:commandButton value="Não" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close"
						style="font-size: 0.9em;" />
				</p:confirmDialog>
      			
      			<p:dialog header="Novo Grupo Github" widgetVar="grupoGitDlg" modal="true" resizable="false" width="600">
      				<h:panelGroup style="border:none;" id="formGrupoNovo">
       						<p:panelGrid  columns="2" columnClasses="tableAlunoLabel,tableAlunoValue" style="margin-bottom:30px;">
                			
                				<h:outputText value="Nome:" style="font-size: 0.9em;" />
                				<p:inputText id="nomeNovo" value="#{gruposGitBean.novoGrupo.nome}" disabled="#{gruposGitBean.disableComponent}" style="font-size: 0.9em;" />
                				
                				<h:outputText value="Grupo:" style="font-size: 0.9em;" />
								<p:selectOneMenu id="ddlGrupoNovo"
									value="#{gruposGitBean.novoGrupo.grupo}"
									disabled="#{gruposGitBean.disableComponent}"
									style="font-size: 0.9em; width:100px;" converter="#{grupoConverter}">
										
									<p:ajax listener="#{gruposGitBean.actualizaNome(gruposGitBean.novoGrupo)}" update="nomeNovo" />

									<f:selectItems value="#{gruposGitBean.listaGrupos}" var="g" itemLabel="#{g.numero}" itemValue="#{g}" />
								</p:selectOneMenu>
                				
                				<h:outputText for="ddlTeamNovo" value="Team Github:" style="font-size: 0.9em;" />
								<p:selectOneMenu id="ddlTeamNovo"
									value="#{gruposGitBean.novoGrupo.idTeamGit}"
									disabled="#{gruposGitBean.disableComponent}"
									style="font-size: 0.9em; width:100px;">
										
									<f:selectItem itemLabel="Seleccione" itemValue="" />
										
									<f:selectItems value="#{gruposGitBean.teamsGit}" var="t"
											itemLabel="#{t.name}" itemValue="#{t.id}" />
								</p:selectOneMenu>
                			</p:panelGrid>
                			
                			<h4 class="page-header">
								Membros
							</h4>
							
							<h:panelGrid id="addAlunoGridNovo" columns="3" columnClasses="first,second,noBorder"
								style="margin-bottom:10px;"
								rendered="#{!gruposGitBean.disableComponent}">
								
								<h:outputLabel value="Escolha um aluno: " for="addAluno"
									rendered="#{!gruposGitBean.disableComponent}"
									style="font-size: 0.9em;" />
								<p:autoComplete value="#{gruposGitBean.alunoSeleccionado}"
									id="addAluno" completeMethod="#{gruposGitBean.completeAluno}"
									style="font-size: 0.9em;" var="a" itemLabel="#{a.numero}"
									itemValue="#{a}" converter="#{alunoConverter}"
									forceSelection="true"
									rendered="#{!gruposGitBean.disableComponent}">
									<p:column>
                    					#{a.numero} - #{a.nome}
                					</p:column>
								</p:autoComplete>
								<p:commandButton value="Adicionar" update=":form:msgs dataTableAlunosNovo"
									action="#{gruposGitBean.adicionarAluno(gruposGitBean.novoGrupo)}"
									style="margin-left: 10px; font-size: 0.9em;"
									process="@this addAlunoGridNovo" />
							</h:panelGrid>
							
							<h:panelGrid columns="1"  columnClasses="noBorder">
								<p:dataTable id="dataTableAlunosNovo" var="aluno" value="#{gruposGitBean.novoGrupo.alunos}">

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Número 
            							</f:facet>
										<h:outputText value="#{aluno.numero}" />
									</p:column>

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							User Github 
            							</f:facet>
										<h:outputText value="#{aluno.userGitHub}" />
									</p:column>

									<p:column style="font-size: 0.9em;">
										<f:facet name="header">  
                							Confirmado? 
            							</f:facet>
										<p:selectBooleanCheckbox value="#{aluno.hasGithub}" disabled="#{gruposGitBean.disableComponent}" />
									</p:column>
									
									<p:column>
										<p:commandButton icon="ui-icon-trash"
											title="Eliminar aluno do grupo" style="font-size: 0.9em;"
											actionListener="#{gruposGitBean.eliminarAluno(gruposGitBean.novoGrupo,aluno)}"
											update=":form:msgs dataTableAlunosNovo"
											rendered="#{!gruposGitBean.disableComponent}">
											
											<p:confirm header="Confirmação"
												message="Tem a certeza que pretende eliminar este aluno do grupo?"
												icon="ui-icon-alert" />
										</p:commandButton>
									</p:column>
								</p:dataTable>	
							</h:panelGrid>
                		</h:panelGroup>	
                		
                		<p:commandButton id="gravarNovo" value="Gravar" process="@this :form:formGrupoNovo" action="#{gruposGitBean.gravarNovo}" oncomplete="PF('grupoGitDlg').hide();" update=":form:msgs :form:gruposGitTable" style="margin-top:10px; font-size: 0.9em;" />
       					<p:commandButton id="cancelarNovo" value="Cancelar" action="#{gruposGitBean.novo}" oncomplete="PF('grupoGitDlg').hide();" style="font-size: 0.9em; margin-top:10px; margin-left:10px;" />
      			</p:dialog>
      			
      			<script type="text/javascript">
    				function test(){
        				var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
        				if(i == 1){return;}
            				$('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
    				}
				</script>
      			
      		</ui:define>
      	</ui:composition>
	</h:body>
</html>      			